import React, { useState, useEffect } from 'react';
import {
  Table,
  Tag,
  Space,
  Radio,
  Button,
  Select,
  Input,
  Form,
  DatePicker,
  Upload,
  message,
} from 'antd';
import { UploadOutlined } from '@ant-design/icons';
import { history } from 'umi';
import request from '../../../../http';
import './index.css';

const { Option } = Select;
const { RangePicker } = DatePicker;
const { TextArea } = Input;

const LeaveApplication = () => {
  const columns = [
    {
      title: '操作人',
      dataIndex: '操作人',
      key: '1',
    },
    {
      title: '操作事项',
      dataIndex: '操作事项',
      key: '2',
    },
    {
      title: '操作时间',
      dataIndex: '操作时间',
      key: '3',
    },
    {
      title: '说明',
      dataIndex: '说明',
      key: '4',
    },
  ];

  //填写数据
  const [zhuTi, setzhuTi] = useState('');
  const [startDate, setstartDate] = useState('');
  const [endDate, setendDate] = useState('');
  const [reason, setreason] = useState('');
  const [file, setfile] = useState('');

  //获取传过来的数据
  const state = history.location.query.state;
  const reason1 = history.location.query.reason;
  const theme = history.location.query.theme;
  const startDateTime = history.location.query.startDateTime;
  const endDateTime = history.location.query.endDateTime;
  const explain = history.location.query.explain;
  //  console.log(startDateTime,endDateTime)

  //定义表格data数据
  const [data, setdata] = useState([
    {
      操作人: '张三',
      操作事项: '审批不通过',
      操作时间: 'xxx',
      说明: '未上传校医院证明',
    },
  ]);

  //学生信息
  const [student, setstudent] = useState([{}]);

  //周期搜索
  useEffect(() => {
    //学生信息/ack/student/insert
    request.post('/ack/student/insert').then((res) => {
      // console.log("学生信息请求成功", res.data)
      const arr = res.data.map((studentObj) => {
        return {
          userName: studentObj.userName,
          account: studentObj.account,
          dkey: studentObj.dkey,
          gkey: studentObj.gkey,
          gradeKey: studentObj.gradeKey,
          name: studentObj.name,
          teacherName: studentObj.teacherName,
        };
      });
      setstudent(arr);
    });
  }, []);

  //文件上传
  const props = {
    name: 'file',
    action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
    headers: {
      authorization: 'authorization-text',
    },
    onChange(info) {
      if (info.file.status !== 'uploading') {
        console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 上传成功`);
        //上传成功发送请求
        request.post('/common/a_t_s/upload').then((res) => {
          console.log('学生信息请求成功', res);
        });
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    },
  };

  //获取开始日期
  const startDateChange = (date, dateString) => {
    setstartDate(dateString);
  };

  //获取结束日期
  const endDateChange = (date, dateString) => {
    setendDate(dateString);
  };

  //获取单选框的值
  const onChangeRadio = (e) => {
    // console.log(e.target.value)
    setreason(e.target.value);
  };

  //获取请假原因
  const onChangeText = (e) => {
    // console.log(e.target.value)
  };

  //取消返回
  const back = () => {
    history.push('/student/absence/index');
  };

  return (
    <div>
      <div>
        学生请假
        <div className="prjName">
          姓名:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.map((obj) => obj.userName)}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 320 }}>
          学号:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.map((obj) => obj.account)}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 600 }}>
          院系:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.map((obj) => obj.dkey)}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 920 }}>
          专业:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.map((obj) => obj.gkey)}
          />
        </div>
        <div className="prjName" style={{ marginTop: 100 }}>
          年级:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.map((obj) => obj.gradeKey)}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 320, marginTop: 100 }}>
          班级:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.map((obj) => obj.name)}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 600, marginTop: 100 }}>
          班主任:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.map((obj) => obj.teacherName)}
          />
        </div>
      </div>
      <Form>
        <div className="prjName" style={{ marginTop: 190 }}>
          *主题:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 1000,
              marginLeft: 12,
            }}
            value={reason1}
            disabled={true}
            placeholder="示例：【陈XX】因病请假1天"
            onChange={(e) => setzhuTi(e.target.value)}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 38, marginTop: 260 }}>
          *开始日期:&nbsp;&nbsp;&nbsp;
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            value={startDateTime}
            disabled={true}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 440, marginTop: 260 }}>
          *结束日期:&nbsp;&nbsp;&nbsp;
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            value={endDateTime}
            disabled={true}
          />
        </div>
        <div className="groupName" style={{ marginLeft: 38, marginTop: 330 }}>
          *请假原因:&nbsp;&nbsp;&nbsp;
          <Radio.Group
            name="radiogroup"
            defaultValue={1}
            onChange={onChangeRadio}
            disabled={true}
            value={theme}
          >
            <Radio name="student" checked={'病假'} value="病假">
              病假(需附医院证明)
            </Radio>
            <Radio name="teacher" value="事假">
              事假
            </Radio>
            <Radio name="admin" value="其他">
              其他
            </Radio>
          </Radio.Group>
          <TextArea
            rows={4}
            onChange={onChangeText}
            disabled={true}
            value={explain}
          />
        </div>

        <div className="groupName" style={{ marginLeft: 38, marginTop: 480 }}>
          *相关附件:&nbsp;&nbsp;&nbsp;
          <Upload {...props}>
            <Button icon={<UploadOutlined />} disabled={true}>
              上传文件
            </Button>
          </Upload>
        </div>

        <div className="prjName" style={{ marginTop: 580 }}>
          *审批人:
          <Input
            style={{
              position: 'absolute',
              bottom: -5,
              width: 200,
              marginLeft: 12,
            }}
            disabled={true}
            value={student.map((obj) => obj.teacherName)}
          />
        </div>
      </Form>

      {state == '审批不通过' ? (
        <div className="prjName" style={{ marginTop: 650 }}>
          <Button
            type="primary"
            style={{
              marginBottom: 16,
            }}
            disabled
          >
            操作记录
          </Button>
          <Table columns={columns} dataSource={data} pagination={false} />
          <div>
            <Button onClick={back}>返回</Button>
          </div>
        </div>
      ) : (
        <div>
          <Button onClick={back} style={{ marginTop: 650, marginLeft: 40 }}>
            返回
          </Button>
        </div>
      )}
    </div>
  );
};

export default LeaveApplication;
